<template>
    <h3>待办数据</h3>
    <n-space class="topdata" vertical>
        <n-form :model="initTopData" label-placement="left" label-width="120">
            <n-descriptions label-placement="top" bordered :column="6">
                <n-descriptions-item :label="item.title" v-for="(item, index) in initTopData" :key="index">
                    <n-form-item v-for="(tabs, index) in item.listIds" :key="index" :label="tabs.title">
                        <n-space align="center">
                            <n-input-number size="small" v-model:value="tabs.val"
                                :style="{ width: '100px' }" /><n-switch size="small" v-model:value="tabs.status" />
                        </n-space>
                    </n-form-item>
                </n-descriptions-item>
            </n-descriptions>
        </n-form>
        <n-space>
            <n-button strong secondary type="success" @click="savaDataInStorege('initTopData', initTopData)">
                保存
            </n-button>
            <n-switch size="small" v-model:value="showAllconter" @update-value="chengeDataFunc" />
        </n-space>
    </n-space>
</template>


<script lang="ts" setup>
import { NDescriptions, NDescriptionsItem, NForm, NFormItem, NInputNumber, NSpace, NButton, NSwitch } from 'naive-ui'
import { inject } from 'vue'
import { ref } from 'vue'
const { initTopData, savaDataInStorege } = inject('initTopData') as any
const showAllconter = ref(true)
function chengeDataFunc() {
    initTopData.value.forEach((item: any) => {
        item.listIds.forEach((tabs: any) => {
            tabs.status = showAllconter.value
        })
    })

}
</script>
<style scoped></style>